<!DOCTYPE html>
<html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商品编辑</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
  
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
    
    <!-- 富文本编辑器 -->
	<link rel="stylesheet" href="../plugins/kindeditor/themes/default/default.css" />
	<script charset="utf-8" src="../plugins/kindeditor/kindeditor-min.js"></script>
	<script charset="utf-8" src="../plugins/kindeditor/lang/zh_CN.js"></script>

	<!-- 引入bootstrap-fileinput 表格系统上传文件(图片)-->
	<script type="text/javascript" src="../plugins/bootstrap-fileinput/js/fileinput.js"></script>
	<script type="text/javascript" src="../plugins/bootstrap-fileinput/js/locales/zh.js"></script>

	<style>
		.file-drop-zone-title {
			color: #aaa;
			font-size: 2em;
			padding: 100px 50px;
			cursor: default;
		}
	</style>
    
    
</head>

<body class="hold-transition skin-red sidebar-mini" >

            <!-- 正文区域 -->
            <section class="content">

                <div class="box-body">

                    <!--tab页-->
                    <div class="nav-tabs-custom">

                        <!--tab头-->
                        <ul class="nav nav-tabs">                       		
                            <li class="active">
                                <a href="#home" data-toggle="tab">商品基本信息</a>                                                        
                            </li>   
                            <li >
                                <a href="#pic_upload" data-toggle="tab">商品图片</a>                                                        
                            </li>    
                            <li >
                                <a href="#customAttribute" data-toggle="tab">扩展属性</a>                                                        
                            </li>     
                            <li >
                                <a href="#spec" data-toggle="tab" >规格</a>                                                        
                            </li>                       
                        </ul>
                        <!--tab头/-->
						<form id="form_id">
                        <!--tab内容-->
                        <div class="tab-content">

                            <!--表单内容-->

                            <div class="tab-pane active" id="home">
                                <div class="row data-type">                                  
								   <div class="col-md-2 title">商品分类</div>
		                          
		                           	  <div class="col-md-10 data">
										  <table>

		                           	  		<tr>
		                           	  			<td>
		                           	  				<select id="one" name="category1Id"  class="form-control" onchange="getItemCatById(this,'tow')">
														<option value="-1">==请选择==</option>
														<option th:each="item : ${itemList}" th:value="${item.id}" >[[${item.name}]]</option>
		                           	  				</select>
		                              			</td>
		                              			<td>
		                           	  				<select id="tow" name="category2Id" onchange="getItemCatById(this,'three')" class="form-control select-sm" ></select>
		                              			</td>
		                              			<td>
		                           	  				<select id="three" name="category3Id" onchange="getItemTypeId(this)" class="form-control select-sm" ></select>
		                              			</td>
		                              			<td>
		                           	  				模板ID:<input name="typeTemplateId" type="text" id="typeId" onclick="getBrandId(this.value)">
		                              			</td>
		                           	  		</tr>

		                           	  	</table>

		                              </div>	                              
		                          	  
									
		                           <div class="col-md-2 title">商品名称</div>
		                           <div class="col-md-10 data">
		                               <input type="text" class="form-control" id="goodsName" name="goodsName" placeholder="商品名称" value="">
		                           </div>
		                           
		                           <div class="col-md-2 title">品牌</div>
		                           <div class="col-md-10 data">
		                              <select class="form-control" id="brandIds" ></select>
		                           </div>
		
								   <div class="col-md-2 title">副标题</div>
		                           <div class="col-md-10 data">
		                               <input type="text" class="form-control" name="caption"   placeholder="副标题" value="">
		                           </div>
		                           
		                           <div class="col-md-2 title">价格</div>
		                           <div class="col-md-10 data">
		                           	   <div class="input-group">
			                          	   <span class="input-group-addon">¥</span>
			                               <input type="text" class="form-control" name="price"  placeholder="价格" value="">
		                           	   </div>
		                           </div>

									<div class="col-md-2 title editer">商品介绍</div>
									<div class="col-md-10 data editer">
										<textarea name="content"   style="width:800px;height:400px;visibility:hidden;" ></textarea>
									</div>
		                           <div class="col-md-2 title rowHeight2x">包装列表</div>
		                           <div class="col-md-10 data rowHeight2x">
		                               
		                           	<textarea rows="4" name="packageList"  class="form-control"   placeholder="包装列表"></textarea>
		                           </div>
		                           
		                           <div class="col-md-2 title rowHeight2x">售后服务</div>
		                           <div class="col-md-10 data rowHeight2x">
		                               <textarea rows="4" name="saleService"  class="form-control"    placeholder="售后服务"></textarea>
		                           </div>
                                </div>

                            </div>

                            <!--图片上传-->
                            <div class="tab-pane" id="pic_upload">
                                <div class="row data-type">                                  
								 <!-- 颜色图片 -->
								 <div class="btn-group">
					                 <button type="button" class="btn btn-default" title="新建" data-target="#uploadModal"  data-toggle="modal"  ><i class="fa fa-file-o"></i> 新建</button>
                             		                 
					             </div>
								 
								 <table class="table table-bordered table-striped table-hover dataTable">
					                    <thead>
					                        <tr>
					                            
											    <th class="sorting">颜色</th>
											    <th class="sorting">图片</th>
												<th class="sorting">操作</th>
							            </thead>
					                    <tbody id="tbody">
<!--					                      <tr>					                           -->
<!--									            <td>-->
<!--									            	-->
<!--									            </td>-->
<!--									            <td>-->
<!--									           		<img alt="" src="" width="100px" height="100px">	            	 -->
<!--									            </td>-->
<!--												 <td> <button type="button" class="btn btn-default" title="删除" ><i class="fa fa-trash-o"></i> 删除</button></td> -->
<!--					                      </tr>-->
					                    </tbody>
								 </table> 
								  
                                </div>
                            </div>
                           
                           
                            <!--扩展属性-->
                            <div class="tab-pane" id="customAttribute">
								<div class="row data-type" id="extent">

								</div>
                            </div>
                      
                            <!--规格-->
                            <div class="tab-pane" id="spec">
                            	<div class="row data-type">
	                            	<div class="col-md-2 title">是否启用规格</div>
			                        <div class="col-md-10 data">
			                        	<input type="checkbox" >			                           
			                        </div>
                            	</div>
                            	<p>
                            	
                            	<div>
                            	
	                                <div id="dataType" class="row data-type">
	                                
<!--		                                <div name="specificationName">-->
<!--			                                <div class="col-md-2 title">屏幕尺寸</div>-->
<!--					                        <div class="col-md-10 data">-->
<!--					                               -->
<!--					                            <span>-->
<!--					                            	<input  type="checkbox" >4.0					                            				                            	-->
<!--					                            </span>  	-->
<!--												<span>-->
<!--					                            	<input  type="checkbox" >4.5					                            				                            	-->
<!--					                            </span>-->
<!--												<span>-->
<!--					                            	<input  type="checkbox" >5.0					                            				                            	-->
<!--					                            </span>												-->
<!--					                            	-->
<!--					                        </div>-->
<!--		                                </div>   -->
<!--										<div name="specificationName">-->
<!--			                                <div class="col-md-2 title">网络制式</div>-->
<!--					                        <div class="col-md-10 data">-->
<!--					                               -->
<!--					                            <span>-->
<!--					                            	<input  type="checkbox" >2G					                            				                            	-->
<!--					                            </span>  	-->
<!--												<span>-->
<!--					                            	<input  type="checkbox" >3G					                            				                            	-->
<!--					                            </span>-->
<!--												<span>-->
<!--					                            	<input  type="checkbox" >4G					                            				                            	-->
<!--					                            </span>												-->
<!--					                            	-->
<!--					                        </div>-->
<!--		                                </div>  -->
		                                                                                  
	                                </div>

	                                
	                                <div class="row data-type">
	                                	 <table id="itemTables" class="table table-bordered table-striped table-hover dataTable">
											<tr id="tr">

											</tr>
<!--						                    <tbody>-->
<!--						                      <tr>					                           -->
<!--										            <td>-->
<!--										            	4.0-->
<!--										            </td>-->
<!--													<td>-->
<!--										            	3G-->
<!--										            </td>-->
<!--										            <td>-->
<!--										           		<input class="form-control"  placeholder="价格">-->
<!--										            </td>-->
<!--										            <td>-->
<!--										            	<input class="form-control" placeholder="库存数量">-->
<!--										            </td>-->
<!--										            <td>-->
<!--										             	<input type="checkbox" >-->
<!--										            </td>-->
<!--										            <td>-->
<!--										                <input type="checkbox" >									             	-->
<!--										            </td>-->
<!--						                      </tr>-->
<!--											  <tr>					                           -->
<!--										            <td>-->
<!--										            	4.0-->
<!--										            </td>-->
<!--													<td>-->
<!--										            	4G-->
<!--										            </td>-->
<!--										            <td>-->
<!--										           		<input class="form-control"  placeholder="价格">-->
<!--										            </td>-->
<!--										            <td>-->
<!--										            	<input class="form-control" placeholder="库存数量">-->
<!--										            </td>-->
<!--										            <td>-->
<!--										             	<input type="checkbox" >-->
<!--										            </td>-->
<!--										            <td>-->
<!--										                <input type="checkbox" >									             	-->
<!--										            </td>-->
<!--						                      </tr>-->
<!--											  <tr>					                           -->
<!--													<td>-->
<!--										            	5.0-->
<!--										            </td>-->
<!--													<td>-->
<!--										            	3G-->
<!--										            </td>-->
<!--										            <td>-->
<!--										           		<input class="form-control"  placeholder="价格">-->
<!--										            </td>-->
<!--										            <td>-->
<!--										            	<input class="form-control" placeholder="库存数量">-->
<!--										            </td>-->
<!--										            <td>-->
<!--										             	<input type="checkbox" >-->
<!--										            </td>-->
<!--										            <td>-->
<!--										                <input type="checkbox" >									             	-->
<!--										            </td>-->
<!--						                      </tr>-->
<!--											  <tr>					                           -->
<!--													<td>-->
<!--										            	5.0-->
<!--										            </td>-->
<!--													<td>-->
<!--										            	4G-->
<!--										            </td>-->
<!--										            <td>-->
<!--										           		<input class="form-control"  placeholder="价格">-->
<!--										            </td>-->
<!--										            <td>-->
<!--										            	<input class="form-control" placeholder="库存数量">-->
<!--										            </td>-->
<!--										            <td>-->
<!--										             	<input type="checkbox" >-->
<!--										            </td>-->
<!--										            <td>-->
<!--										                <input type="checkbox" >									             	-->
<!--										            </td>-->
<!--						                      </tr>-->
<!--											  -->
<!--						                    </tbody>-->
									 	</table>
								
	                                </div>
	                                
	                            </div>
                            </div>
                            
                        </div>
                        <!--tab内容/-->
						<!--表单内容/-->
                    </div>
					</form>
                   </div>
                  <div class="btn-toolbar list-toolbar">
					  <input type="button" onclick="add()" value="保存">
				      <button class="btn btn-default" >返回列表</button>

				  </div>

            </section>
            
            
<!-- 上传窗口 -->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" >
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="myModalLabel">上传商品图片</h3>
		</div>
		<div class="modal-body">							
			
			<table id="imgTable" class="table table-bordered table-striped">
		      	<tr>
		      		<td>颜色</td>
		      		<td><input id="color" class="form-control" placeholder="颜色" >  </td>
		      	</tr>			    
		      	<tr>
		      		<td>商品图片</td>
		      		<td>
						<table>
							<tr>
								<td>
									<input type="file" name="file" id="myFile" multiple>
<!--									<input type="hidden" class="form-control" id="img" name="img">-->
								</td>
							</tr>
						</table>
		      		</td>
		      	</tr>		      	
			 </table>				
			
		</div>
		<div class="modal-footer">						
			<button class="btn btn-success"  data-dismiss="modal" aria-hidden="true" onclick="insertPic()">保存</button>
			<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
		</div>
	  </div>
	</div>
</div>

            
            <!-- 正文区域 /-->
<script type="text/javascript">

	$(function(){
		$("#myFile").fileinput({
			language :'zh',
			uploadUrl: "/goods/upload",
			browseClass: "btn btn-primary",
			allowedFileExtensions: ["jpg","png","gif"],
			maxFileCount: 1,
			enctype :"multipart/form-data"
		})
		$("#myFile").on('fileuploaded',function (event,data,previewId,index){
					if (data.response != null){
						$('[name=file]').val(data.response.data)
					}
				}
		)
	})

	var id = 0;
	var editor;
	KindEditor.ready(function(K) {
		editor = K.create('textarea[name="content"]', {
			allowFileManager : true
		});
	});

	function getItemCatById(obj,selectId){
		var pid = obj.value;
		$.ajax({
			url : "/goodsController/selectByItemCatByParentId/" + pid,
			type : "post",
			dataType : "json",
			async : false,
			success : function (result){
				if (result.code == 10000){
					var catList = result.result;
					var html = '<option value="-1">请选择</option>';
					$.each(catList,function (i,e){
						html += '<option value="' + e.id + '">'+e.name+'</option>'
					})
					$("#"+selectId).html(html)
					if (selectId == "tow"){
						$("#three").html("")
					}
				}
			},
			error:function (result){
				alert("请刷新")
			}
		})
	}
	function getItemTypeId(obj){
		var pid = obj.value;
		$.ajax({
			url : "/goodsController/getItemTypeId/" + pid,
			type : "post",
			dataType : "json",
			async : false,
			success : function (result){
				var list1 = result.result
				$("#typeId").val(list1[0].typeId)
			},
			error:function (result){
				alert("请刷新")
			}
		})
	}
	//品牌 的扩展属性
	var typeTemplate = ""
	function getBrandId(){
		id = $("#typeId").val();
		$.ajax({
			url : "/goodsController/getBrandId?id=" + id,
			type : "post",
			dataType : "json",
			async : false,
			success : function (result){
				var list = result.result
				typeTemplate = list[0].id
				var str = ''
				var extend = ""
				var brandsJson = JSON.parse(list[0].brandIds)
				var items = JSON.parse(list[0].customAttributeItems)
				var option = "<option value='-1'>--请选择--</option>";
				for (var j = 0; j < brandsJson.length; j++) {
					str += ',' + brandsJson[j].text
					option += "<option value='" + brandsJson[j].id + "'>" + brandsJson[j].text + "</option>";
				}
				str = str.substring(1);
				$("#brandIds").html(option);

				$(items).each(function (i,e){
					extend += '<div>'
					extend += '<div class="col-md-2 title">'+ e['text'] +'</div>'
					extend += '<div class="col-md-10 data">'
					extend += '<input class="form-control" name="custom" placeholder="扩展属性">'
					extend += '</div>'
					extend += '</div>'
				})
				$('#extent').html(extend)

				getData(list[0].id)
			},
			error:function (result){
				alert("请刷新")
			}
		})
	}

	function getData(id){
		// var ids = JSON.stringify(specIds)
		$.ajax({
			url : "/goodsController/selectOption",
			type : "post",
			dataType: "json",
			data : {id : id},
			success:function (result) {
				var html = '';
				$.each(result.result,function (i,e) {
					html +='<div><div class="col-md-2 title">'+e.text+'</div>'
					html +='<div class="col-md-10 data">';
					$.each(e.specificationOptions,function (index,ele) {
						html +='<span>'
						html +='<input  onclick="checkSpec(this,\''+e.text+'\',\''+ele.optionName+'\')" ' +
								'type="checkbox" value="'+ele.id+'" >'+ele.optionName+'</span>'

					})
					html +='</div></div>'

				});
				$("#dataType").html(html)

				var content = ""
				content += '<th class="sorting">'+ result.result[0].text +'</th>'
				content += '<th class="sorting">'+ result.result[1].text +'</th>'
				content += '<th class="sorting">价格</th>'
				content += '<th class="sorting">库存</th>'
				content += '<th class="sorting">是否启用</th>'
				content += '<th class="sorting">是否默认</th>'
				$('#tr').html(content)


			},
			error:function (data) {
				alert("error");
			}
		})
	}
	// function add(){
	// 	$.ajax({
	// 		url : "/goodsController/addInfo",
	// 		type : "post",
	// 		dataType : "json",
	// 		data :$("#form_id").serialize(),
	// 		async : false,
	// 		success : function (result){
	// 			if (result.code == 10000){
	// 				alert("增加成功")
	// 			}
	// 		},
	// 		error:function (result){
	// 			alert("请刷新")
	// 		}
	// 	})
	// }

	function add(){
		// 扩展属性数据
		var customAttrItems = [];
		var inputList = $("#extent").find("input");
		$.each(inputList, function (i, input) {
			var text = $(input).attr("placeholder");
			var value = $(input).val();
			var data = '{"text":"' + text + '","value":"' + value + '"}';

			customAttrItems.push(data);
		})
		// 扩展属性
		var customAttributeItems = "[" + customAttrItems + "]";
		// 颜色 图片地址
		var itemImages = JSON.stringify(itemImage)


		//获取规格页中的数据
		var specificationItemsJsonStr = JSON.stringify(items);


		var titles = ""
		var spec = []
		var sellPoint = ""
		var prices = ""
		var stockCount = ""
		var nums = ""
		var isDefaults = ""

		//拼接tb_item
		var tb_items = [];
		//获取价格 库存
		var trs = $("#specOptionTbody").find("tr");
		//商品名
		var goodsName = $("#goodsName").val();
		for (var j = 0; j < itemList.length; j++) {
			var title = '';
			for (var k = 0; k < items.length; k++) {
				//拼接item中的标题	例:华为 移动3G网络 机身内存16G
				title += goodsName+" "+items[k].attributeName+""+itemList[j].spec[items[k].attributeName]+" "
			}
			var tds = $(trs[j]).find("td");
			//价格
			var price = $(tds[items.length]).find("input").val()
			//库存
			var num = $(tds[items.length + 1]).find("input").val()
			//是否默认
			var isDefault = $(tds[items.length + 3]).find("input").val()



			// JSON.stringify(itemList[j].spec)
			titles = title
			spec.push(itemList[j].spec)
			sellPoint = $("#caption").val()
			prices = price
			stockCount = num
			nums = num
			isDefaults = isDefault

		}
		var tbItemsJson = JSON.stringify(tb_items)

		// 获取文本编辑器的原始html内容
		var content = editor.html()
		var data = $('#form_id').serialize() + "&introduction=" + content
				+ "&itemImages=" + itemImages
				+ "&customAttributeItems=" + customAttributeItems
				+ "&specificationItems=" + specificationItemsJsonStr
				+ "&typeTemplateId=" + typeTemplate
				+ "&title=" + titles
				+ "&spec=" + JSON.stringify(spec)
				// + "&sellPoint=" + sellPoint
				+ "&price=" + prices
				+ "&stockCount=" + stockCount
				+ "&num=" + nums
				+ "&isDefault=" + isDefaults
				+ "&image=" + $('#image').val()
				+ "&brand=" + $('#brandId').val()
		alert(data)
		$.ajax({
			url : "/goodsController/insertGoods",
			type : "post",
			dataType: "json",
			data : data,
			success : function (){
				alert("增加数据成功")
				location.reload()
			},
			error : function (){
				alert("请联系管理员");
			}
		})
	}
	var itemImage = []
	function insertPic(){
		var colors = $('#color').val();
		var img = $('#myFile').val();
		console.log(img)
		var thead=document.getElementById("tbody");
		var tr=document.createElement("tr");
		tr.innerHTML= '<td><span>'+ colors +'</span></td><td><img alt="" src="'+img+'" width="100px" height="100px"><input type="hidden" id="image" value="'+ img +'">\n' +
				'<input type="hidden" value="'+ img +'">' +
				'\t\t\t\t\t\t\t\t\t\t\t\t  </td>\n' +
				'\t\t\t\t\t\t\t\t\t\t\t\t  <td>\n' +
				'\t\t\t\t\t\t\t\t\t\t\t\t\t  <button type="button" class="btn btn-default" title="删除" onclick="deleteInfo(this)" >\n' +
				'\t\t\t\t\t\t\t\t\t\t\t\t\t\t  <i class="fa fa-trash-o" ></i> 删除</button>\n' +
				'\t\t\t\t\t\t\t\t\t\t\t\t  </td>'
		thead.appendChild(tr);
		var item = {"color":""+colors+"","url":""+img+""}
		itemImage.push(item)
	}
	// function insertPic() {
	// 	var img = $("#myFile").val();
	// 	table = "";
	// 	table += '<tr>'
	// 	table += '<td>'
	// 	table += '<input id="col" value="'+ $("#color").val() +'">'
	// 	table += '</td>'
	// 	table += '<td>'
	// 	table += '<img alt="" src='+ img +' width="100px" height="100px" id="image">'
	// 	table += '</td>'
	// 	table += '<td> <button type="button" class="btn btn-default" title="删除" ><i class="fa fa-trash-o"></i> 删除</button></td>'
	// 	table += '</tr>'
	// 	$("#imgTable").append(table);
	// }


	var items = []
	function checkSpec(event,name,value){
		//调用方法判断原集合中是否已有attributeName
		var obj = searchObjectByKey(items,'attributeName',name);
		if(obj != null){
			if($(event).prop('checked')){//勾选
				//如果之前有数据，往原有的对象中追加
				obj.attributeValue.push(value);
			}else{//取消勾选
				obj.attributeValue.splice(obj.attributeValue.indexOf(value),1);//从items中移除规格选项
				//如果规格选项没有数据了
				if(obj.attributeValue.length==0){
					//移除items中的数据
					items.splice(items.indexOf(obj),1)
				}
			}
		}else{
			//如果之前没有数据，items新加数据
			items.push({'attributeName':name,'attributeValue':[value]});
		}
		// 构建勾选的规格数据
		createItemList(event);
	}

	function searchObjectByKey(list,attributeName,attributeValue){
		for(var i=0;i<list.length;i++){
			//如果list中我们选择key存在
			if(list[i][attributeName] == attributeValue){
				return list[i];//返回当前对象
			}
		}
		//遍历结束后都不存在，返回null
		return null;
	}
	//创建SKU表
	var itemList = null;
	function createItemList(event){
		var itemList2 = [{spec:{}}] ;
		for(var i = 0; i < items.length; i++){
			itemList2 =  addColum(itemList2,items[i].attributeName,items[i].attributeValue);
		}
		itemList = itemList2;
		console.log(itemList);

		// 构建table
		var table = "";
		table += '<thead>'
		table += '<tr>'
		for (var f = 0; f < items.length; f++) {
			table += '<th class="sorting">' + items[f].attributeName + '</th>'
		}

		table += '<th class="sorting">价格</th>'
		table += '<th class="sorting">库存</th>'
		table += '<th class="sorting">是否启用</th>'
		table += '<th class="sorting">是否默认</th>'
		table += '</tr>'
		table += '</thead>'
		table += '<tbody id="specOptionTbody">'
		for (var j = 0; j < itemList.length; j++) {
			table += '<tr>'
			for (var e = 0; e < items.length; e++) {
				table += '<td>' + itemList[j].spec[items[e].attributeName] + '</td>'
			}
			table += '<td>'
			table += '<input class="form-control"  placeholder="价格"></td>'
			table += '<td><input class="form-control" placeholder="库存数量"></td>'
			table += '<td><input type="checkbox" ></td>'
			table += '<td> <input type="checkbox" value="1"></td>'
			table += '</tr>'
		}
		table += '</tbody>'
		$("#itemTables").html(table)
	}
	function addColum(list,columName,columValues) {
		//定义新集合接收行
		var newList = [];
		for(var i = 0; i < list.length; i++){
			var oldRow = list[i];
			for(var j=0; j < columValues.length; j++){
				var newRow = JSON.parse(JSON.stringify(oldRow)); //深克隆
				newRow.spec[columName] = columValues[j];
				newList.push(newRow)
			}
		}
		return newList;
	}

</script>
       
</body>

</html>